<template>
  <view class="career-report-job-tips" v-if="isShowJobRecommend">
    <img class="tips-icon" :src="tipsIcon" />
    <template v-if="status == 0">
      <view class="job-tips-text">
        填写求职意向，精准推荐岗位，完善报告
      </view>
      <view class="job-tips-btn" @click="toAims">
        去填写
      </view>
    </template>
    <template v-if="status == 1">
      <view class="job-tips-text">
        暂无岗位推荐，修改求职意向
      </view>
      <view class="job-tips-btn" @click="toAims">
        去修改
      </view>
    </template>
    <template v-if="status == 2">
      <view class="job-list">
        <view v-for="item in jobList" :key="item.id" :class="'job-item ' + jobItemAnimationClass">
          <view class="job-item-content">
            <view class="job-item-name">{{ item.jtzw }}</view>
            <view class="job-item-location">{{ item.regionName.substring(0, 2) }}</view>
            <view class="job-item-salary">{{ item.salary }}</view>
          </view>
          <view class="job-item-btn" @click="handleJobItemClick(item)">
            立即查看
          </view>
        </view>
      </view>
    </template>

  </view>
</template>

<script>
import { getJobRecommendByPerson } from "@/api/modules/career";
export default {
  name: "careerReportJobTips",
  data() {
    return {
      cardType: "",
      isShowJobRecommend: false,
      isFill: false, //职途权益完成情况
      status: 0, //0：没有求职意向 1：有求职意向，没有匹配岗位 2：有求职意向，有匹配岗位
      jobList: [],
      tipsIcon:
        "https://img3.job1001.com/ypMp/elan/images/careerPath/jobTipsIcon.png",
      jobItemAnimationClass: "job-item-static", // 新增动画class变量
    };
  },
  created() {},
  methods: {
    getJobList() {
      this.cardType = uni.getStorageSync("cardType");
      if (!this.cardType) {
        return;
      }
      getJobRecommendByPerson({
        personId: uni.getStorageSync("person-id").slice(2),
        cardType: this.cardType,
      }).then((res) => {
        console.log(res);
        this.jobList = res.data.jobList;
        this.isShowJobRecommend = res.data.isShowJobRecommend;
        this.isFill = res.data.isFill;
        this.status = res.data.status;
        // 根据岗位数设置动画class
        if (this.jobList.length === 1) {
          this.jobItemAnimationClass = "job-item-static";
        } else if (this.jobList.length === 2) {
          this.jobItemAnimationClass = "job-item-animation-2";
        } else {
          this.jobItemAnimationClass = "job-item-animation-3";
        }
        this.$emit("update:isFill", this.isFill);
        this.$emit("update:status", this.status);
      });
    },
    toAims() {
      uni.navigateTo({
        url: "/pagesSub/newResume/aimItem/index?from=careerReportJobTips",
      });
      return;
      if (this.status == 1) {
        uni.navigateTo({
          url: "/pagesSub/newResume/index",
        });
      } else {
        uni.navigateTo({
          url: "/pagesSub/newResume/aimItem/index?from=careerReportJobTips",
        });
      }
    },
    handleJobItemClick(item) {
      uni.navigateTo({
        url: "/pagesSub/public/jobDetail/index?jobId=" + item.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.career-report-job-tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48rpx);
  height: 80rpx;
  background: linear-gradient(276deg, #fffbfb 0%, #fffbf1 100%);
  border-radius: 12rpx;
  margin: 0 auto;
  margin-top: 18rpx;
  padding: 12rpx 16rpx;
  box-sizing: border-box;
  .tips-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8px;
  }
  .job-list {
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    flex: 1;
    height: 56rpx;
    overflow: hidden;
    .job-item {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      flex: 1;
      top: 0;
      left: 0;
      margin-bottom: 12rpx;
      // animation: jobItemAnimation 9s linear infinite;
      // @keyframes jobItemAnimation {
      //   0%,
      //   33.33% {
      //     transform: translateY(0);
      //   }
      //   38.88% {
      //     transform: translateY(-68rpx);
      //   }
      //   38.89%,
      //   72.21% {
      //     transform: translateY(-66rpx);
      //   }
      //   77.76% {
      //     transform: translateY(-132rpx);
      //   }
      //   77.77%,
      //   100% {
      //     transform: translateY(-132rpx);
      //   }
      // }

      .job-item-content {
        display: flex;
        align-items: center;
        position: relative;
        height: 36rpx;
        flex: 1;
        .job-item-name {
          max-width: 180rpx;
          height: 36rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #333333;
          line-height: 36rpx;
          margin-right: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .job-item-location {
          width: 48rpx;
          height: 36rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 36rpx;
          text-align: right;
          font-style: normal;
        }
        .job-item-salary {
          flex: 1;
          height: 36rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #f75a3e;
          line-height: 36rpx;
          text-align: right;
        }
      }
      .job-item-btn {
        background: #ffebe7;
        border-radius: 12rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 26rpx;
        color: #f75a3e;
        line-height: 36rpx;
        padding: 10rpx 30rpx;
        margin-left: 14rpx;
      }
    }
    .job-item-static {
      /* 不加动画，静态展示 */
    }
    .job-item-animation-2 {
      animation: jobItemAnimation2 6s linear infinite;
    }
    @keyframes jobItemAnimation2 {
      0%,
      45% {
        transform: translateY(0);
      }
      55% {
        transform: translateY(-63rpx);
      }
      100% {
        transform: translateY(-63rpx);
      }
    }
    .job-item-animation-3 {
      animation: jobItemAnimation3 9s linear infinite;
    }
    @keyframes jobItemAnimation3 {
      0%,
      33.33% {
        transform: translateY(0);
      }
      38.88% {
        transform: translateY(-63rpx);
      }
      38.89%,
      72.21% {
        transform: translateY(-63rpx);
      }
      77.76% {
        transform: translateY(-126rpx);
      }
      77.77%,
      100% {
        transform: translateY(-126rpx);
      }
    }
  }
  .job-tips-text {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 26rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: left;
    flex: 1;
  }
  .job-tips-btn {
    background: #ffebe7;
    border-radius: 12rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 26rpx;
    color: #f75a3e;
    line-height: 36rpx;
    padding: 10rpx 30rpx;
    margin-left: 14rpx;
  }
}
</style>